<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <title>用户注册</title>
   <style>
       * {
           margin: 0;
           padding: 0;
           box-sizing: border-box;
       }

       body {
           font-family: 'Arial', sans-serif;
           background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
           height: 100vh;
           display: flex;
           justify-content: center;
           align-items: center;
       }

       .register-container {
           background: rgba(255, 255, 255, 0.9);
           padding: 40px;
           border-radius: 10px;
           box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
           width: 100%;
           max-width: 400px;
       }

       .register-header {
           text-align: center;
           margin-bottom: 30px;
       }

       .register-header h2 {
           color: #333;
           font-size: 28px;
           font-weight: 600;
       }

       .register-form .form-group {
           margin-bottom: 20px;
       }

       .register-form label {
           display: block;
           margin-bottom: 8px;
           color: #555;
           font-weight: 500;
       }

       .register-form input {
           width: 100%;
           padding: 12px 15px;
           border: 2px solid #ddd;
           border-radius: 5px;
           font-size: 16px;
           transition: border-color 0.3s;
       }

       .register-form input:focus {
           outline: none;
           border-color: #667eea;
       }

       .register-form button {
           width: 100%;
           padding: 12px;
           background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
           color: white;
           border: none;
           border-radius: 5px;
           font-size: 16px;
           font-weight: 600;
           cursor: pointer;
           transition: transform 0.2s;
       }

       .register-form button:hover {
           transform: translateY(-2px);
       }

       .register-form button:active {
           transform: translateY(0);
       }

       .form-footer {
           text-align: center;
           margin-top: 20px;
       }

       .form-footer a {
           color: #667eea;
           text-decoration: none;
           font-size: 14px;
       }

       .form-footer a:hover {
           text-decoration: underline;
       }

       .error-message {
           color: #e74c3c;
           font-size: 14px;
           margin-top: 5px;
           display: none;
       }

       .success-message {
           color: #27ae60;
           font-size: 14px;
           margin-top: 15px;
           text-align: center;
           display: none;
       }

   </style>


</head>
<body>
<div class="register-container">
    <div class="register-header">
        <h2>用户注册</h2>
    </div>

    <form class="register-form" id="registerForm" method="post" action="/day30_tomcat_serlet_war/register">
        <div class="form-group">
            <label for="username">用户名</label>
            <input type="text" id="username" name="username" placeholder="请输入用户名" required>
            <div class="error-message" id="usernameError">请输入用户名</div>
        </div>

        <div class="form-group">
            <label for="password">密码</label>
            <input type="password" id="password" name="password" placeholder="请输入密码" required>
            <div class="error-message" id="passwordError">请输入密码</div>
        </div>

        <div class="form-group">
            <label for="phone">手机号码</label>
            <input type="tel" id="phone" name="phone" placeholder="请输入手机号码" required>
            <div class="error-message" id="phoneError">请输入有效的手机号码</div>
        </div>

        <div class="form-group">
            <label for="sex">性别</label>
            <select id="sex" name="sex" required>
                <option value="">请选择性别</option>
                <option value="1">男</option>
                <option value="0">女</option>
            </select>
            <div class="error-message" id="sexError">请选择性别</div>
        </div>

        <button type="submit">注册</button>

        <div class="success-message" id="successMessage">
            注册成功！欢迎加入！
        </div>
    </form>

    <div class="form-footer">
        <a href="logic.html">已有账号？立即登录</a>
    </div>

</div>


<script>
        $("#username").blur(()=>{
            let username = $("#username").val().trim();
            //发送ajax请求
            $.ajax({
                url: "/day30_tomcat_serlet_war/login/checkUser",
                type: "GET",
                data: { username: username },
                success: function(data) {
                    console.log(data)
                    if (data.exists) {
                        $("#usernameError").text("用户名已存在").show();
                    } else {
                        $("#usernameError").hide();
                    }
                },
                error: function() {
                    $("#usernameError").text("检查用户名时出错").show();
                }


            })
        })






    // document.getElementById('registerForm').addEventListener('submit', function(e) {
    //     e.preventDefault();
    //
    //     // 获取输入值
    //     const username = document.getElementById('username').value.trim();
    //     const password = document.getElementById('password').value.trim();
    //     const phone = document.getElementById('phone').value.trim();
    //     const sex = document.getElementById('sex').value;
    //
    //     // 隐藏之前的消息
    //     document.getElementById('usernameError').style.display = 'none';
    //     document.getElementById('passwordError').style.display = 'none';
    //     document.getElementById('phoneError').style.display = 'none';
    //     document.getElementById('sexError').style.display = 'none';
    //     document.getElementById('successMessage').style.display = 'none';
    //
    //     // 验证输入
    //     let isValid = true;
    //
    //     if (username === '') {
    //         document.getElementById('usernameError').style.display = 'block';
    //         isValid = false;
    //     }
    //
    //     if (password === '') {
    //         document.getElementById('passwordError').style.display = 'block';
    //         isValid = false;
    //     }
    //
    //     if (!/^\d{11}$/.test(phone)) {
    //         document.getElementById('phoneError').style.display = 'block';
    //         isValid = false;
    //     }
    //
    //     if (sex === '') {
    //         document.getElementById('sexError').style.display = 'block';
    //         isValid = false;
    //     }
    //
    //     // 如果验证通过，模拟注册
    //     if (isValid) {
    //         // 这里可以添加实际的注册逻辑
    //         // 比如发送 AJAX 请求到服务器
    //
    //         // 模拟注册成功
    //         document.getElementById('successMessage').style.display = 'block';
    //
    //         // 清空表单
    //         // document.getElementById('registerForm').reset();
    //
    //         // 3秒后跳转或执行其他操作
    //         setTimeout(function() {
    //             alert('注册成功！欢迎 ' + username);
    //             // 这里可以跳转到其他页面
    //             // window.location.href = 'dashboard.html';
    //         }, 1000);
    //     }
    // });
    //
    // // 实时验证
    // document.getElementById('username').addEventListener('input', function() {
    //     if (this.value.trim() !== '') {
    //         document.getElementById('usernameError').style.display = 'none';
    //     }
    // });
    //
    // document.getElementById('password').addEventListener('input', function() {
    //     if (this.value.trim() !== '') {
    //         document.getElementById('passwordError').style.display = 'none';
    //     }
    // });
    //
    // document.getElementById('phone').addEventListener('input', function() {
    //     if (/^\d{11}$/.test(this.value.trim())) {
    //         document.getElementById('phoneError').style.display = 'none';
    //     }
    // });
</script>
</body>
</html>